<template>
  <!-- 搜索 -->
  <view>
    <d-navBar title="搜索" isTran isSeat isPerch></d-navBar>

    <view class="main">
      <view class="scarch">
        <input
          type="text"
          confirm-type="search"
          @confirm="searchBtn"
          v-model="apiParams.search"
          placeholder="搜索商品"
        />
        <view class="sc-btn" @click="searchBtn">搜索</view>
      </view>
      <view class="order" v-if="isShow">
        <view class="conditions">
          <view class="co-one" @click="tabSynthesis">
            <view>综合</view>
            <image
              class="co-arrow"
              src="/static/common/arrow.png"
              mode=""
            ></image>
          </view>
          <view class="co-one" @click="tabSalesVolumeSort">
            <view>销量</view>
            <image
              v-if="apiParams.salesVolumeSort == 0"
              class="co-arrow"
              src="/static/common/arrow.png"
              mode=""
            >
            </image>
            <image
              v-else-if="apiParams.salesVolumeSort == 1"
              class="co-arrow s2"
              src="/static/common/arrow2.png"
              mode=""
            ></image>
            <image
              v-else-if="apiParams.salesVolumeSort == 2"
              class="co-arrow s2"
              src="/static/common/arrow3.png"
              mode=""
            ></image>
          </view>
          <view class="co-one" @click="typeShow = true">
            <view>{{ typeFont }}</view>
            <image
              class="co-arrow"
              src="/static/common/arrow.png"
              mode=""
            ></image>
          </view>
          <view class="co-one" @click="tabPriceSort">
            <view>价格</view>
            <image
              v-if="apiParams.priceSort == 0"
              class="co-arrow"
              src="/static/common/arrow.png"
              mode=""
            >
            </image>
            <image
              v-else-if="apiParams.priceSort == 1"
              class="co-arrow s2"
              src="/static/common/arrow2.png"
              mode=""
            ></image>
            <image
              v-else-if="apiParams.priceSort == 2"
              class="co-arrow s2"
              src="/static/common/arrow3.png"
              mode=""
            ></image>
          </view>
        </view>
        <c-scroll-list
          ref="list"
          total-key="total"
          :option="{ auto: false }"
          :api-params="apiParams"
          @load="(result) => (list = result.list)"
          :api="apiFn"
        >
          <view class="or-box">
            <view
              class="shop ne-shop"
              v-for="(v, i) in list"
              :key="i"
              @click="
                $fn.jumpPage('/pages/goods/pages/goodsDetails?id=' + v.id)
              "
            >
              <image class="sh-img" :src="v.cover" mode=""></image>
              <view class="sh-title otw">{{ v.title }}</view>
              <view class="df aife" v-if="userType == 0">
                <view class="sh-price"><text>￥</text>{{ v.price }}</view>
              </view>
              <view class="df aife" v-else>
                <view class="sh-price"><text>￥</text>{{ v.memberPrice }}</view>
                <view class="sh-old">￥{{ v.price }}</view>
              </view>
            </view>
          </view>
        </c-scroll-list>
      </view>

      <!-- 搜索记录 -->
      <view class="records" v-if="!isShow">
        <view class="re-top">
          <view class="re-title">历史搜索记录</view>
          <image
            class="re-icon"
            @click="delRecords"
            :src="require('../static/del.png')"
            mode=""
          ></image>
        </view>
        <view class="re-main">
          <view
            class="ma-one otw"
            v-for="(v, i) in docRecordList"
            :key="i"
            @click="searchFn(v)"
          >
            <image
              class="ma-img"
              :src="require('../static/time.png')"
              mode=""
            ></image>
            <view class="ma-text">{{ v }}</view>
          </view>
        </view>
      </view>
    </view>

    <c-check
      :show="typeShow"
      :dataList="typeList"
      @determine="typeFn"
      title="请选择分类"
    ></c-check>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      docRecordList: [],
      pageNum: 0,
      typeShow: false,
      typeList: [
        {
          label: "全部",
          value: null,
        },
      ],
      typeFont: "全部",
      search: "",
      isShow: false,
      apiFn: this.$api.allProductsList,
      apiParams: {
        categoryId: "0",
        search: "",
        comprehensive: "", //综合
        priceSort: "", //	价格 1-升序 2-降序
        salesVolumeSort: "", //	销量 1-升序 2-降序
        search: "", //关键字
        type: null, //1-商家券 2-热销商品 3-近期新品
        status: 1,
        userId: uni.getStorageSync("user").userId,
      },
      userType: 0,
    };
  },
  onLoad(options) {
    if (options.type) {
      this.type = options.type;
    }
    let list = uni.getStorageSync("docRecordList");
    console.log("list", list);
    if (list) {
      this.docRecordList = JSON.parse(list);
    }
    this.getWaresTypeMenu();
    this.getMembership();
  },
  methods: {
    // 获取会员等级
    getMembership() {
      this.$api.getUserTypeY().then((res) => {
        // console.log(res, '会员dengj');
        // this.userType = res.data;
        this.userType = 1;
      });
    },

    // 刷新列表
    refresh() {
      this.$refs.list.refresh();
    },
    // 获取分类
    async getWaresTypeMenu() {
      const { data } = await this.$api.waresTypeMenu({
        type: 0, //类型 0-全部 1-商品 2-商品券
      });
      console.log("分类data12", data);
      let arr = data.map((v) => {
        v.label = v.title;
        v.value = v.id;
        return v;
      });
      this.typeList = [...this.typeList, ...arr];
    },
    // 切换综合 - 重置
    tabSynthesis() {
      this.apiParams.priceSort = 0;
      this.apiParams.salesVolumeSort = 0;
      this.apiParams.type = null;
      this.refresh();
    },
    // 切换类型
    typeFn(e) {
      console.log("e", e);
      if (e.value) {
        this.typeFont = e.label;
        this.apiParams.categoryId = e.value;
        this.typeShow = false;
      } else {
        this.typeFont = e.label;
        this.apiParams.categoryId = e.value;
        this.typeShow = false;
      }
      this.refresh();
    },
    // 切换销量
    tabSalesVolumeSort() {
      if (this.apiParams.salesVolumeSort <= 1) {
        this.apiParams.salesVolumeSort++;
      } else {
        this.apiParams.salesVolumeSort = 0;
      }
      this.refresh();
    },
    // 切换价格
    tabPriceSort() {
      if (this.apiParams.priceSort <= 1) {
        this.apiParams.priceSort++;
      } else {
        this.apiParams.priceSort = 0;
      }
      this.refresh();
    },
    // 点击搜索记录
    searchFn(val) {
      console.log("val", val);
      this.apiParams.search = val;
      this.isShow = true;
      setTimeout(() => {
        this.refresh();
      });
    },
    // 删除历史记录
    delRecords() {
      uni.showModal({
        title: "提示",
        content: "是否确认删除搜索记录",
        success: (res) => {
          if (res.confirm) {
            this.docRecordList.splice(0, this.docRecordList.length);
            uni.removeStorageSync("docRecordList");
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 搜索
    searchBtn() {
      if (
        this.apiParams.search &&
        this.docRecordList.indexOf(this.apiParams.search) == -1
      ) {
        if (this.docRecordList.length > 10) {
          this.docRecordList.pop();
        }
        this.docRecordList.unshift(this.apiParams.search);
        uni.setStorageSync("docRecordList", JSON.stringify(this.docRecordList));
      }
      this.isShow = true;
      setTimeout(() => {
        this.refresh();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sc-bg {
  width: 750rpx;
  height: 320rpx;
  border-radius: 0rpx;
  position: absolute;
  top: 0;
  z-index: 1;
}

.main {
  position: relative;
  z-index: 2;
}

.scarch {
  width: 710rpx;
  height: 72rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 40rpx;
  opacity: 1;
  border: 1rpx solid #2ad03d;
  margin: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  input {
    padding: 20rpx 32rpx;
    width: 100%;
  }

  .sc-btn {
    flex: none;
    width: 120rpx;
    height: 68rpx;
    background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 66rpx;
    text-align: center;
    margin-top: -1rpx;
  }
}

.records {
  .re-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30rpx;
    padding: 40rpx 0rpx 12rpx;
    border-bottom: 1rpx solid #dcdfe2;

    .re-title {
      font-size: 28rpx;
      font-weight: 400;
      color: #909299;
    }

    .re-icon {
      width: 28rpx;
      height: 28rpx;
    }
  }

  .re-main {
    padding: 24rpx 30rpx;
    display: flex;
    flex-wrap: wrap;

    .ma-one {
      display: flex;
      align-items: center;
      width: 50%;
      padding-bottom: 16rpx;

      .ma-img {
        width: 28rpx;
        height: 28rpx;
        margin-right: 8rpx;
        flex: none;
      }

      .ma-text {
        font-size: 28rpx;
        font-weight: 500;
        color: #787a80;
      }
    }
  }
}

.order {
  .conditions {
    padding: 0rpx 32rpx 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .co-one {
      display: flex;
      align-items: center;

      .co-arrow {
        width: 14rpx;
        height: 8rpx;
        margin-left: 12rpx;

        &.s2 {
          height: 22rpx;
        }
      }
    }
  }

  .or-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 24rpx 32rpx;
    border-top: 8rpx solid #f6f6f6;

    .shop {
      width: 212rpx;
      border-radius: 12rpx;
      position: relative;
      margin-bottom: 24rpx;

      .sh-img {
        width: 100%;
        height: 212rpx;
        border-radius: 12rpx;
        overflow: hidden;
        position: relative;

        .sh-end {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 40rpx;
          background: linear-gradient(90deg, #ff4b57 44%, #ff8326 100%);
          border-radius: 12rpx;
          font-size: 20rpx;
          color: #ffffff;
          text-align: center;
          line-height: 38rpx;
        }

        image {
          width: 100%;
          height: 100%;
        }
      }

      .sh-title {
        width: 100%;
        font-size: 28rpx;
        color: #343840;
      }

      .sh-price {
        font-size: 36rpx;
        font-weight: bold;
        color: #ee3b31;

        text {
          font-size: 20rpx;
        }
      }

      .sh-old {
        font-size: 20rpx;
        font-weight: 400;
        color: #999999;
        line-height: 36rpx;
        text-decoration: line-through;
        margin-left: 6rpx;
      }
    }

    .ne-shop {
      width: 330rpx;

      .sh-img {
        height: 330rpx;
      }
    }
  }
}
</style>
